<template>
	<view>
		<!-- <page-head ref="pageHead" :title="'森歌微商城-销售榜单'" :headtype="2"></page-head> -->
		
		<tabs :current="active" @change="changeShow" :is-scroll="true" style="text-align: center;position: fixed;top: 0;z-index: 9;width: 100%;">
			<tab :name="userInfo.level==3?'定金支付单数':'整体营业额'"></tab>
			<tab :name="userInfo.level==3?'小件产品售卖金额':'支付订单数量'"></tab>
		</tabs>
			<view v-if="list.length==0" class="null">暂无数据~</view>
			<view v-else class="order-list">
				<view class="row flex-start margin30" v-for="(item,index) in list" :key="index">
					<image class="rankimg" v-if="index == 0" src="/bundle/static/image/1@2x.png" mode=""></image>
					<image class="rankimg" v-if="index == 1" src="/bundle/static/image/2@2x.png" mode=""></image>
					<image class="rankimg" v-if="index == 2" src="/bundle/static/image/3@2x.png" mode=""></image>	
					<view class="sell" v-if="index !== 0 && index !== 1 && index !== 2" >{{index+1}}</view>
					<image class="headshot" :src="item.avatar" mode=""></image>
					<view class="name">{{item.nickname}}</view>
					<view class="money">{{item.amount}}</view>
				</view>
				

			</view>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {
		getRankinglist,
		getUser
	} from "@/api/user";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				active:0,
				type:0,
				list:[]
			}
		},
		onLoad() {
			this.getUserInfo();
			
		},
		computed: {
		    ...mapGetters(["userInfo"]),
		},
		methods: {
			async getUserInfo(){
				const {
					data,
					code
				} = await getUser({})
				if (code == 1) {
					if(data.level==3){
						this.type=0
					}else{
						this.type=2
					}
					this.getRankList()
				}
			},
			changeShow(e){
				if(this.userInfo.level==3){
					if(e==0){
						this.type=0
					}else if(e==1){
						this.type=1
					}
				}else if(this.userInfo.level==4){
					if(e==0){
						this.type=2
					}else if(e==1){
						this.type=3
					}
				}
				this.getRankList()
			},
			getRankList(){
				getRankinglist({
					type: this.type
				}).then(({
					data
				}) => {
					this.list=data
					
				})
			},
		}
	}
</script>

<style>
.order-list{
	padding-top:46px;
}
page{
	background-color: #efefef;
	padding-bottom: 40rpx;
}
.row:nth-of-type(1){
	margin-top: 36rpx;
}
.row{
	background-color: #fff;
	padding: 26rpx;
	margin-top: 14rpx;
	border-radius: 14rpx;
}
.rankimg{
	width: 60rpx;
	height: 76rpx;
}
.headshot{
	width: 90rpx;
	height: 90rpx;
	border-radius: 50rpx;
	margin-left: 52rpx;
}
.name{
	font-size: 30rpx;
	width: 260rpx;
	margin-left: 20rpx;
}
.money{
	font-size: 30rpx;
	margin-left: 20rpx;
}
.sell{
	color: #989898;
	font-size: 38rpx;
	width: 60rpx;
	text-align: center;
}
.null{
	margin-top: 500rpx;
	text-align: center;
}
</style>
